<template>
  <div class="pageWapper">
    <Header :title="content" />
    <div class="pageWapper_content">
      <Before v-if="content === '表前'" ref="refBefore" @nextStep="nextStep" />
      <BoxBefore v-if="content === '表箱前'" @nextStep="nextStep" />
      <BranchBefore
        v-if="content === '分支箱前' || content === '农网台区T节点前'"
        @nextStep="nextStep"
      />
      <!-- <TNode v-if="content === '农网台区T节点前'" @nextStep="nextStep" /> -->
    </div>
    <!-- <div class="bottomBtn">
      <Button round block type="primary" @click="nextStep"> 下一步 </Button>
    </div> -->
  </div>
</template>

<script lang="ts" setup>
import Header from "@/components/Header.vue"
import { ref } from "vue"
import { useRouter } from "vue-router"
import { Form, Field, CellGroup, Button, Popup, Picker, NavBar } from "vant"
import { useCreateExperiment } from "@/hooks/useCreateExperiment"
import Before from "./components/Before/index.vue"
import BoxBefore from "./components/BoxBefore/index.vue"
import BranchBefore from "./components/BranchBefore/index.vue"
import TNode from "./components/TNode/index.vue"

const { createExperimentData } = useCreateExperiment()
console.log("createExperimentData", createExperimentData.value)
const title = ref("")

const content = ref("")
onMounted(() => {
  console.log("createExperimentData", createExperimentData.value)
  const { position } = createExperimentData.value
  console.log("position", position)
  content.value = position
})

const refBefore = ref(null)

const $router = useRouter()
const nextStep = (value) => {
  console.log("value", value)
  $router.push({
    path: "/createExperiment/step3"
  })
}
</script>
<style scoped lang="less">
@import "./index.less";
</style>
